<template>
  <div class="page-container">
    <div class="register-container">
      <div class="header">
        <div class="title">用户注册</div>
      </div>
      <div class="form-container">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="手机号码"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" placeholder="确认密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="fixed-buttons">
      <el-row justify="space-around">
        <el-col :span="6">
          <el-button type="text" @click="goTo('/index')">

            <span>首页</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goTo('/order')">

            <span>订单</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goTo('/discover')">

            <span>发现</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goTo('/my')">

            <span>我的</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElForm, ElFormItem, ElInput, ElRadio, ElRadioGroup, ElButton } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';

const router = useRouter();
const goTo = (path) => {
  router.push(path);
};

const formRef = ref<FormInstance>();
const form = ref({
  phone: '',
  password: '',
  confirmPassword: '',
  gender: '男'
});

const rules: FormRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value!== form.value.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      }, trigger: 'blur' }
  ]
};

const submitForm = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      // 这里可以添加实际的注册逻辑，例如发送请求到后端进行注册
      console.log('注册成功');
      // 注册成功后可以跳转到登录页面或其他页面
      goTo('/login');
    } else {
      console.log('表单验证失败');
    }
  });
};
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.register-container {
  flex: 1;
  font-family: Arial, sans-serif;
}

.header {
  background-color: #007aff;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.form-container {
  padding: 20px;
}

.fixed-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px 0;
  border-top: 1px solid #ccc;
}
</style>